<template>
  <!-- 用料明细 -->
  <div class="materialDetail">
    <a-spin :spinning="spinning">
      <column-Table
        title="成衣主料"
        tableName="mainData"
        showSetting
        :disabled="disabled || mainTableDisabled"
        :source="mainData"
        :columns="MainMaterialColumn"
        :showAddBtn="!mainDisabledColumns.length"
        @addLine="tableName => addRow(tableName, 1)"
        @operator="operator"
        @changeSelect="
          (e, key, index, record, open) => {
            changeSelect(e, key, index, mainData, 1, record, open)
          }
        "
      >
        <!-- <template #categoryType="{ record }" v-if="!$attrs.isMainCp">
          {{ COMBINE_PRODUCT_TYPE[record.categoryType] }}
        </template> -->
        <template #categoryType="{ record }">
          <a-select
            :disabled="disabled"
            mode="multiple"
            class="w100p"
            placeholder="请选择"
            v-model:value="record.categoryTypeList"
            allow-clear
          >
            <a-select-option :key="1">上装</a-select-option>
            <a-select-option :key="2">下装</a-select-option>
          </a-select>
        </template>
        <template #panton="{ record, index }">
          <a-input
            :disabled="
              disabled ||
              mainTableDisabled ||
              mainDisabledColumns.includes('panton')
            "
            v-model:value="record.panton"
            placeholder="面料颜色"
            @click="showPanton(record, index)"
          ></a-input>
        </template>
      </column-Table>
      <column-Table
        class="mt10"
        title="成衣辅料"
        :disabled="disabled || garmentTableDisabled"
        tableName="garmentData"
        showSetting
        :source="garmentData"
        :columns="GarmentAccessoriesColumn"
        :showAddBtn="!garmentDisabledColumns.length"
        @addLine="tableName => addRow(tableName, 2)"
        @operator="operator"
        @changeSelect="
          (e, key, index, record, open) => {
            changeSelect(e, key, index, garmentData, 2, record, open)
          }
        "
      >
        <!-- <template #categoryType="{ record }" v-if="!$attrs.isMainCp">
          {{ COMBINE_PRODUCT_TYPE[record.categoryType] }}
        </template> -->
        <template #categoryType="{ record }">
          <a-select
            :disabled="disabled"
            mode="multiple"
            class="w100p"
            placeholder="请选择"
            v-model:value="record.categoryTypeList"
            allow-clear
          >
            <a-select-option :key="1">上装</a-select-option>
            <a-select-option :key="2">下装</a-select-option>
          </a-select>
        </template>
      </column-Table>
      <column-Table
        class="mt10"
        title="包装辅料"
        tableName="packageData"
        showSetting
        :source="packageData"
        :disabled="disabled || packageTableDisabled"
        :columns="PackagingAccessoriesColumn"
        :showAddBtn="!packageDisabledColumns.length"
        @addLine="tableName => addRow(tableName, 3)"
        @operator="operator"
        @changeSelect="
          (e, key, index, record, open) => {
            changeSelect(e, key, index, packageData, 3, record, open)
          }
        "
      >
      </column-Table>

      <pantone-color
        v-if="source === 1"
        ref="pantonRef"
        v-model:value="colorVisible"
        :index="colorIndex"
        :is-lb="isLb"
        @close="closeColorVisible"
        @submitColor="submitPantone"
      />
      <ldso
        v-else
        ref="pantonRef"
        :status="5"
        v-model:value="colorVisible"
        :index="colorIndex"
        :supplier-code="selectSupplierCode"
        :color="selectPantoneColor"
        @close="closeColorVisible"
        @submitColor="submitColor"
      />
    </a-spin>
  </div>
</template>
<script>
import { useMaterial } from '@/hook/materialDetail.js'
import { COMBINE_PRODUCT_TYPE } from 'utils/constants.js'
import { onMounted, toRefs, watch, ref, reactive, computed } from 'vue'
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },

    disabled: {
      type: Boolean,
      default: false
    },
    mainTableDisabled: {
      type: Boolean,
      default: false
    },
    garmentTableDisabled: {
      type: Boolean,
      default: false
    },
    packageTableDisabled: {
      type: Boolean,
      default: false
    },
    mainDisabledColumns: {
      type: Array,
      default: () => []
    },
    garmentDisabledColumns: {
      type: Array,
      default: () => []
    },
    packageDisabledColumns: {
      type: Array,
      default: () => []
    },
    isTemplate: {
      type: Boolean,
      default: false
    },
    cp: {
      type: String,
      default: ''
    },
    purchaseTaskId: {
      type: Number,
      default: null
    },
    id: {
      type: Number,
      default: null
    },
    supplierId: {
      type: Number,
      default: null
    },
    // 1  大货
    source: {
      type: Number,
      default: null
    },
    templateFunc: {
      type: Function,
      default: null
    },
    detailFunc: {
      type: Function,
      default: null
    },
    bomFunc: {
      type: Function,
      default: null
    },
    params: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 是否为创新
    innovite: {
      type: Boolean,
      default: false
    },
    // 是否为大货工艺单
    isLargeProcess: {
      type: Boolean,
      default: false
    },
    addColumns: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  emits: ['update:data'],
  setup(props, { emit }) {
    const { materialMethod, materialState, pantonRef } = useMaterial(props)
    // const pageState = inject('pageState') || {}
    const spinning = ref(false)
    const otherParams = reactive(props.params)
    const isTemplate = computed(() => {
      if (props.isTemplate) {
        return true
      } else if (!props.id) {
        return true
      }
      return false
    })
    const fetchData = () => {
      const params = {
        ...{
          cp: props.cp,
          supplierId: props.supplierId,
          source: props.source,
          id: props.id
        },
        ...otherParams
      }
      let fetchMaterial = null
      // 新增
      if (isTemplate.value && props.templateFunc) {
        //  用料明细
        fetchMaterial = params.cp ? props.templateFunc(params) : null
        console.log(fetchMaterial, 'fetchMaterial')
      } else {
        //  用料明细
        fetchMaterial = props.detailFunc(params)
      }
      if (fetchMaterial) {
        spinning.value = true
        materialMethod.getData(fetchMaterial, function (data) {
          // pageState.materialData = data
          console.log(data, 'sssssssssssssssss')
          if (data.isbom) {
            materialMethod.getData(props.bomFunc(params))
          }

          emit('update:data', data)
          spinning.value = false
        })
      }
    }
    const refresh = () => {
      fetchData()
      materialMethod.loadCondition(1)
      materialMethod.loadCondition(2)
      materialMethod.loadCondition(3)
    }
    watch(
      () => props.cp,
      () => {
        refresh()
      }
    )
    watch(
      () => props.params,
      val => {
        Object.assign(otherParams, val)
      },
      {
        deep: true
      }
    )
    watch(
      () => spinning.value,
      val => {
        emit('update:loading', val)
      }
    )

    onMounted(() => {
      // 插入字段
      const keys = Object.keys(props.addColumns)
      if (keys.length) {
        keys.forEach(key => {
          props.addColumns[key].forEach(item => {
            const indexArr = Object.keys(item)
            indexArr.forEach(ite => {
              materialState[materialState.colData[key]].splice(
                ite,
                0,
                ...item[ite]
              )
            })
          })
        })
      }
      materialState.MainMaterialColumn.forEach(item => {
        item.setDisabled = () => {
          return props.mainDisabledColumns.includes(item.key)
        }
      })
      materialState.GarmentAccessoriesColumn.forEach(item => {
        item.setDisabled = () => {
          return props.garmentDisabledColumns.includes(item.key)
        }
      })
      materialState.PackagingAccessoriesColumn.forEach(item => {
        item.setDisabled = () => {
          return props.packageDisabledColumns.includes(item.key)
        }
      })
      console.log(
        materialState.MainMaterialColumn,
        'materialState.MainMaterialColumn'
      )
      fetchData()
      materialMethod.loadCondition(1)
      materialMethod.loadCondition(2)
      materialMethod.loadCondition(3)
    })
    return {
      ...toRefs(materialState),
      ...materialMethod,
      pantonRef,
      refresh,
      spinning,
      COMBINE_PRODUCT_TYPE
    }
  }
}
</script>
<style lang="scss">
body .preview.ant-select-disabled {
  .ant-select-selector {
    background: transparent !important;
    border: unset !important;
    height: unset !important;
    color: rgba(0, 0, 0, 0.85) !important;
    cursor: auto !important;
    input {
      cursor: auto !important;
    }
  }
  .ant-select-selection-placeholder {
    display: none;
  }
  .ant-select-arrow {
    display: none;
  }
}
body .materialDetail {
  .ant-input[disabled],
  .ant-input-disabled {
    background: transparent !important;
    border: unset;
    color: #000;
  }
  .ant-input[disabled]:placeholder-shown {
    display: none;
  }
  .ant-upload.ant-upload-disabled {
    display: none;
  }
}
</style>
